{% extends "admin/base.html" %}
{% block title %}测试用例管理 - {{ problem.title }}{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
  <!-- 标题区 -->
  <div class="mb-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900">
      测试用例管理 - {{ problem.title }}
    </h1>
    <div class="w-32 h-2 bg-blue-600 mt-2 rounded-full"></div>
  </div>

  <!-- 消息提示 -->
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      <div class="mb-6 space-y-2">
        {% for category, message in messages %}
          <div class="px-4 py-2 rounded-md 
                      {% if category == 'success' %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
            {{ message }}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  {% endwith %}

  <!-- 测试用例表单（修复action端点） -->
  <form method="post" action="{{ url_for('manage_testcases', problem_id=problem.id) }}" 
        class="bg-white rounded-lg shadow-md p-6 mb-6">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    
    <div class="mb-6">
      <h2 class="text-lg sm:text-xl font-semibold text-gray-800">现有测试用例</h2>
      <p class="mt-1 text-sm text-gray-500">仅可选择 <strong>1个示例用例</strong>，用于用户参考</p>
    </div>

    <div id="testcases-container" class="space-y-4">
      {% if testcases and testcases|length > 0 %}
        {% for tc in testcases %}
        <div class="testcase-row flex items-center justify-between border-b pb-3">
          <div class="flex items-center gap-3">
            <input type="text" name="testcases[{{ loop.index0 }}][input]" 
                   value="{{ tc.input }}" 
                   placeholder="输入数据（如 [1,2,3]）"
                   class="w-40 border border-gray-300 rounded-md px-2 py-1 placeholder:text-gray-400">
            <span class="text-gray-400">:</span>
            <input type="text" name="testcases[{{ loop.index0 }}][output]" 
                   value="{{ tc.output }}" 
                   placeholder="预期输出（如 [3,2,1]）"
                   class="w-40 border border-gray-300 rounded-md px-2 py-1 placeholder:text-gray-400">
            <label class="flex items-center gap-1">
              <input type="checkbox" name="testcases[{{ loop.index0 }}][is_sample]" 
                     {% if tc.is_sample %}checked{% endif %} 
                     class="h-4 w-4 accent-blue-600">
              <span class="text-sm text-gray-600">示例</span>
            </label>
          </div>
          <button type="button" class="remove-testcase text-red-600 hover:text-red-700 font-medium">删除</button>
        </div>
        {% endfor %}
      {% else %}
        <div class="text-gray-500 mb-4">暂无测试用例，请点击"添加测试用例"按钮创建</div>
      {% endif %}
    </div>

    <!-- 操作按钮 -->
    <div class="mt-6 flex items-center gap-4">
      <button type="button" id="add-testcase" 
              class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">
        添加测试用例
      </button>
      <button type="submit" 
              class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors">
        保存测试用例
      </button>
    </div>
  </form>

  <!-- 导航按钮（修复端点名称） -->
  <div class="flex gap-4 text-gray-600 hover:text-gray-800 transition-colors">
    <a href="{{ url_for('edit_problem', problem_id=problem.id) }}">← 返回编辑题目</a>
    <a href="{{ url_for('admin_manage_problems') }}">← 返回题目列表</a>
  </div>
</div>

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const addBtn = document.getElementById('add-testcase');
    const container = document.getElementById('testcases-container');
    let index = {{ testcases|length if testcases else 0 }};

    // 单选示例逻辑
    container.addEventListener('change', (e) => {
      if (e.target.name && e.target.name.endsWith('[is_sample]')) {
        const allCheckboxes = container.querySelectorAll('input[name$="[is_sample]"]');
        allCheckboxes.forEach(checkbox => {
          if (checkbox !== e.target) {
            checkbox.checked = false;
          }
        });
      }
    });

    // 添加新测试用例
    addBtn.addEventListener('click', () => {
      const row = document.createElement('div');
      row.className = 'testcase-row flex items-center justify-between border-b pb-3';
      row.innerHTML = `
        <div class="flex items-center gap-3">
          <input type="text" name="testcases[${index}][input]" 
                 placeholder="输入数据（如 [1,2,3]）"
                 class="w-40 border border-gray-300 rounded-md px-2 py-1 placeholder:text-gray-400">
          <span class="text-gray-400">:</span>
          <input type="text" name="testcases[${index}][output]" 
                 placeholder="预期输出（如 [3,2,1]）"
                 class="w-40 border border-gray-300 rounded-md px-2 py-1 placeholder:text-gray-400">
          <label class="flex items-center gap-1">
            <input type="checkbox" name="testcases[${index}][is_sample]" 
                   class="h-4 w-4 accent-blue-600">
            <span class="text-sm text-gray-600">示例</span>
          </label>
        </div>
        <button type="button" class="remove-testcase text-red-600 hover:text-red-700 font-medium">删除</button>
      `;
      container.appendChild(row);
      index++;
    });

    // 删除测试用例
    container.addEventListener('click', (e) => {
      if (e.target.classList.contains('remove-testcase')) { 
        const row = e.target.closest('.testcase-row');
        row.classList.add('opacity-0', 'transform', 'translate-x-4', 'transition-all', 'duration-300');
        setTimeout(() => {
          row.remove();
          reindexTestcases();
        }, 300);
      }
    });

    // 重新编号
    function reindexTestcases() {
      const rows = container.querySelectorAll('.testcase-row');
      rows.forEach((row, idx) => {
        const input = row.querySelector('input[name$="[input]"]');
        const output = row.querySelector('input[name$="[output]"]');
        const isSample = row.querySelector('input[name$="[is_sample]"]');
        
        input.name = `testcases[${idx}][input]`;
        output.name = `testcases[${idx}][output]`;
        isSample.name = `testcases[${idx}][is_sample]`;
      });
      index = rows.length;
    }
  });
</script>
{% endblock %}
{% endblock %}